<template>
    <a-spin :spinning="confirmLoading">
        <j-form-container :disabled="formDisabled">
            <a-form :form="form" slot="detail">
                <a-row>
                    <a-col :md="12" :xs="24">
                        <h2 class="text-white" style="text-align: center;font-weight: bold;">
                            <a-icon type="container" />
                            <span style="margin-left: 10px;">医疗机构基本信息</span>
                        </h2>
                        <a-form-item label="机构名称" :labelCol="labelCol" :wrapperCol="wrapperCol" >
                            <a-input v-decorator="['customerName']" placeholder="请输入客户名称"></a-input>
                        </a-form-item>
                        <a-form-item label="机构等级" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
                            <a-select placeholder="选择机构等级" v-decorator="['organizationLevel']">
                                <a-select-option v-for="(item,index) in this.$config.organizationLevelList" :key="index"
                                                 :value="item.value">
                                    {{item.label}}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                        <a-form-item label="机构编号" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
                            <a-input :value="customerNumber"  :disabled="true"></a-input>
                        </a-form-item>
                        <a-form-item label="负责人姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
                            <a-input v-decorator="['leadername']" placeholder="请输入负责人姓名"></a-input>
                        </a-form-item>
                        <a-form-item label="负责人电话" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
                            <a-input v-decorator="['leaderphone']" placeholder="请输入负责人电话"></a-input>
                        </a-form-item>
                        <a-form-item label="第二手机号码" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input v-decorator="['secondphone']" placeholder="请输入第二手机号码"></a-input>
                        </a-form-item>
                        <a-form-item label="所在区域" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
                            <select-address v-if="refreshAddress" :areaOption="areaOption"
                                            @change="changeArea"></select-address>
                        </a-form-item>
                        <a-form-item label="详细地址" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
                            <a-input v-model="currentAddress" placeholder="请输入机构地址" :rows="4" @change="searchAddress()"></a-input>
                        </a-form-item>

                        <a-form-item label="经纬度" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
                            <a-input  style="width: 150px;margin-right: 10px;"  v-model="currentLong"></a-input>
                            <a-input  style="width: 150px;" v-model="currentLat"></a-input>
<!--                            <a-input  style="width: 150px;margin-right: 10px;"  v-decorator="['longitude']"></a-input>-->
<!--                            <a-input  style="width: 150px;" v-decorator="['latitude']"></a-input>-->
                        </a-form-item>
<!--                        <div id="container" class="mapbox" style="width:500px;height: 250px; background-color: #ccc;margin-left: 120px;"></div>-->
                        <div id="map-box">
                            <a-row class="page-store-map">
                                <!-- 3 地图显示 -->
                                <div v-show="showMap" id="mapContainer" style="width:450px;height: 250px; background-color: #ccc;margin-left: 80px;"></div>
                                <!-- 4 搜索出来的列表 -->
                                <ul class="lacation-list" v-if="positionList.length > 0">
                                    <li v-for="(position, index) in positionList" :key="index" :class="position.id == activeId ? 'active' : ''"
                                        v-on:click="changeActiveId(position.id, position.latLng,position.address)">
                                        <h3>{{ position.name }}</h3>
                                        <p>{{ position.address }}</p>
                                    </li>
                                </ul>
                            </a-row>
                        </div>


                    </a-col>

                    <a-col :md="12" :xs="24" v-if="showSetting">
                        <h2 class="text-white" style="text-align: center;font-weight: bold;">
                            <a-icon type="setting" />
                            <span style="margin-left: 10px;">机构基础信息配置</span>
                        </h2>
                        <a-form-item label="机构类型" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
                            <a-select placeholder="机构类型" v-decorator="['customerType']">
                                <a-select-option v-for="(val,key) in CUSTOMER_TYPE" :key="key" :value="val.value">
                                    {{val.name}}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                        <a-form-item label="营业状态" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
                            <a-select placeholder="选择营业状态" v-decorator="['operationState']">
                                <a-select-option :value="0">正常营业</a-select-option>
                                <a-select-option :value="1">暂停营业</a-select-option>
                            </a-select>
                        </a-form-item>
                        <a-form-item label="固废系统" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
                            <a-select placeholder="上传固废系统" v-decorator="['whetherToUpload']">
                                <a-select-option :value="0">不上传</a-select-option>
                                <a-select-option :value="1">上传省固废</a-select-option>
                                <a-select-option :value="2">上传市固废</a-select-option>
                            </a-select>
                        </a-form-item>
                        <a-form-item label="是否连接蓝牙秤" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
                            <a-select placeholder="是否连接蓝牙秤" v-decorator="['linkBluetooth']">
                                <a-select-option :value="0">不连接</a-select-option>
                                <a-select-option :value="1">连接蓝牙秤</a-select-option>
                            </a-select>
                        </a-form-item>
                        <a-form-item label="废物填报类型" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
                            <a-select placeholder="废物填报类型" v-decorator="['wasteFormType']">
<!--                                <a-select-option :value="null">默认值</a-select-option>-->
                                <a-select-option :value="0">扫描二维码扎带</a-select-option>
                                <a-select-option :value="1">打印二维码标签</a-select-option>
                                <a-select-option :value="2">全部</a-select-option>
                            </a-select>
                        </a-form-item>
                        <a-form-item label="绑定/解绑负责人" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input v-decorator="['userId']" placeholder="解绑或者绑定"></a-input>
                        </a-form-item>
                    </a-col>

                    <a-col :md="12" :xs="24">
                        <h2 class="text-white" style="text-align: center;font-weight: bold;">
                            <a-icon type="audit" />
                            <span style="margin-left: 10px;">机构资质认证信息</span>
                        </h2>
                        <a-form-item label="营业执照编号" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
                            <a-input v-decorator="['businessLicenseNumber']" placeholder="请输入营业执照编号"></a-input>
                        </a-form-item>
                        <a-form-item label="营业执照" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <j-image-upload :value="businessLicense" @change="changeBusinessLicense"></j-image-upload>
                        </a-form-item>
                        <a-form-item label="许可证编号" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
                            <a-input v-decorator="['licenceNumber']" placeholder="请输入许可证编号"></a-input>
                        </a-form-item>
                        <a-form-item label="许可证" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <j-image-upload :value="getImgView(licence)" @change="changeLicence"></j-image-upload>
                        </a-form-item>
                        <a-form-item label="许可证有效时间" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
                            <a-range-picker
                                    :placeholder="['有效开始时间', '有效结束时间']"
                                    v-model="rangeTime"
                                    format="YYYY-MM-DD"
                                    @change="handleDateChange"
                            />
                        </a-form-item>
                    </a-col>

                    <a-col v-if="showFlowSubmitButton" :span="24" style="text-align: center">
                        <a-button @click="submitForm">提 交</a-button>
                    </a-col>
                </a-row>
            </a-form>
        </j-form-container>
    </a-spin>
</template>


<script>
    import { getAction, httpAction,getFileAccessHttpUrl } from '@/api/manage'
    import pick from 'lodash.pick'
    import SelectAddress from '@/components/Jane/SelectAddress'
    import { GET_USER_AUTH } from '@/utils/util'
    import JImageUpload from '@/components/jeecg/JImageUpload'
    import { jsonp } from 'vue-jsonp'

    //是否允许设置机构信息
    const SETTING_CUSTOMER = 'setting_customer_information';

    const CUSTOMER_TYPE = [
        {
            value: '1',
            name: '输液瓶类型'
        },
        {
            value: '2',
            name: '医疗废物类型'
        },
        {
            value : '3',
            name : "输液瓶和医疗废物类型",
        },
        {
            value : '4',
            name : "无服务类型",
        },
    ]

    var searchService,geocoder,map,markersArray = [];
    export default {
        name: 'HcRecycleCustomerInfoForm',
        components: {
            SelectAddress,
            JImageUpload,
        },
        props: {
            //流程表单data
            formData: {
                type: Object,
                default: () => {
                },
                required: false
            },
            //表单模式：true流程表单 false普通表单
            formBpm: {
                type: Boolean,
                default: false,
                required: false
            },
            //表单禁用
            disabled: {
                type: Boolean,
                default: false,
                required: false
            }
        },
        data() {
            return {
                refreshAddress: true,
                areaOption: {},
                rangeTime: [], // 许可证有效时间

                form: this.$form.createForm(this),
                model: {},
                labelCol: {
                    xs: { span: 24 },
                    sm: { span: 5 }
                },
                wrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 16 }
                },
                confirmLoading: false,
                validatorRules: {},
                url: {
                    add: '/hc/hcRecycleCustomerInfo/add',
                    edit: '/hc/hcRecycleCustomerInfo/edit',
                    queryById: '/hc/hcRecycleCustomerInfo/queryById'
                },
                CUSTOMER_TYPE,
                businessLicense: '', //营业执照
                licence : '', //许可证
                customerNumber : '', //机构编码
                province: {
                    value: 7,
                    name: '贵州省'
                },
                city: {
                    value: 8,
                    name: '贵阳市'
                },
                district: {
                    value: 10,
                    name: '观山湖区'
                },
                markers: [],
                currentAddress: '', //搜索的地点
                currentLat: '26.6783626',
                currentLong: '106.6408880',
                positionList: [],
                activeId: '',
                searchKey: '',
                showMap: false
            }
        },
        computed: {
            formDisabled() {
                if (this.formBpm === true) {
                    if (this.formData.disabled === false) {
                        return false
                    }
                    return true
                }
                return this.disabled
            },
            showFlowSubmitButton() {
                if (this.formBpm === true) {
                    if (this.formData.disabled === false) {
                        return true
                    }
                }
                return false
            },
            showSetting(){
                if(GET_USER_AUTH(SETTING_CUSTOMER)){
                    return true;
                }
                return false;
            }
        },
        created() {
            //如果是流程中表单，则需要加载流程表单data
            this.showFlowData()

        },
        mounted() {
            // this.searchAddress(this.searchKey);
        },
        methods: {
            // 搜索地址
            searchAddress(searchKey) {
                this.showMap = true
                // 地图初始化
                this.mapInit();
                // 设置搜索的范围、关键字等属性、页码、每页数量
                let keyword;
                if (searchKey) {
                    this.currentAddress = searchKey;
                }
                keyword = this.currentAddress;
                if (keyword.trim() == '') {
                    return;
                }

                let city = this.city.name;
                let pageIndex = 0;
                let pageCapacity = 20;
                this.clearOverlays(this.markers);
                // 根据输入的城市设置搜索范围
                this.searchService.setLocation(city);
                // 设置搜索页码
                this.searchService.setPageIndex(pageIndex);
                // 设置每页的结果数
                this.searchService.setPageCapacity(pageCapacity);
                // 根据输入的关键字在搜索范围内检索
                this.searchService.search(keyword);
            },
            mapInit() {
                let _this = this;
                // 初始地址
                var center = new qq.maps.LatLng(this.currentLat,this.currentLong);
                _this.map = new qq.maps.Map(document.getElementById('mapContainer'), {
                    center: center,
                    zoom: 15
                });

                // 设置Poi检索服务，用于本地检索、周边检索
                _this.searchService = new qq.maps.SearchService({
                    // 检索成功的回调函数
                    complete: function (results) {
                        // 设置回调函数参数
                        var pois = results.detail.pois;
                        var latlngBounds = new qq.maps.LatLngBounds();
                        var positionList = [];
                        for (var i = 0, l = pois.length; i < l; i++) {
                            var poi = pois[i];

                            // 经纬度至少要4位小数
                            if (poi.latLng.lng.toString().split(".")[1].length < 4) {
                                console.log(poi.latLng.lng.toString().split(".")[1].length);
                                poi.latLng.lng = poi.latLng.lng.toFixed(4);
                            }
                            if (poi.latLng.lat.toString().split(".")[1].length < 4) {
                                poi.latLng.lat = poi.latLng.lat.toFixed(4);
                            }

                            if (i == 0) { // 只标注第一个点
                                // 扩展边界范围，用来包含搜索到的Poi点
                                latlngBounds.extend(poi.latLng);

                                _this.currentLat = poi.latLng.lat;
                                _this.currentLong = poi.latLng.lng;

                                var marker = new qq.maps.Marker({
                                    map: _this.map
                                });
                                marker.setPosition(pois[0].latLng);
                                _this.markers.push(marker);
                                _this.activeId = pois[0].id
                            }

                            positionList.push({
                                address: poi.address || '',
                                name: poi.name || '',
                                id: poi.id,
                                latLng: poi.latLng || { lat: '', lng: '' }
                            });
                        }
                        _this.positionList = positionList; // 更新一下视图层的列表
                        // 调整地图视野
                        _this.map.fitBounds(latlngBounds);
                        console.log('positionList===>',positionList)
                    },

                    // 若服务请求失败，则运行以下函数
                    error: function () {
                        console.log('搜索不到结果');
                    }
                });
                // 调用地址解析类
                _this.geocoder = new qq.maps.Geocoder({
                    complete: function (result) {
                        _this.clearOverlays(_this.markers);
                        // 调整地图包含该点
                        var latlngBounds = new qq.maps.LatLngBounds();
                        latlngBounds.extend(result.detail.location);
                        _this.map.fitBounds(latlngBounds);
                        var marker = new qq.maps.Marker({
                            map: _this.map
                        });
                        marker.setPosition(result.detail.location);
                        _this.markers.push(marker);
                    }
                });
            },
            clearOverlays(overlays) { // 除地图上的marker
                var overlay;
                while ((overlay = overlays.pop())) {
                    overlay.setMap(null);
                }
            },
            changeActiveId(id, latLng,address) {
                var _this = this;
                this.activeId = id;

                this.clearOverlays(this.markers);
                this.currentAddress = address;
                this.currentLat = latLng.lat;
                this.currentLong = latLng.lng;

                // 调整地图包含该点
                var latlngBounds = new qq.maps.LatLngBounds();
                latlngBounds.extend(latLng);
                this.map.fitBounds(latlngBounds);

                var marker = new qq.maps.Marker({
                    map: _this.map
                });
                marker.setPosition(latLng);

                this.markers.push(marker);
            },
            toStoreRegister() { // 确定修改
                // 要拿来覆盖的数据有: 地址，以搜索列表的结果为准，不以输入框的结果为准
                // 若是搜索地址，则搜索结果的经纬度会自动代入经纬度输入框
                // 若是搜索经纬度，则搜索结果只有一个点，并且经纬度就是输入框的值
                // 直接取输入框的经纬度来用，防止用户输入了经纬度不点击按钮，将经纬度是否在省市区内的逻辑改到提交那里。
                let { positionList, currentLat, currentLong } = this;

                // 拿到当前active的搜索结果的地址，若列表为空，则不覆盖原来的地址
                for (var i = 0; i < positionList.length; i++) {
                    if (positionList[i].id == this.activeId) {
                        // console.log(positionList[i].latLng.lat, positionList[i].latLng.lng);
                        // 去除省市区
                        var myBossAddress = positionList[i].address + positionList[i].name;
                        var shengshiqu = this.sheng + this.shi + this.qu;
                        var shengshi = this.sheng + this.shi;

                        if (myBossAddress.includes(shengshiqu)) {
                            myBossAddress = myBossAddress.replace(shengshiqu, '');
                        } else if (myBossAddress.includes(shengshi)) {
                            myBossAddress = myBossAddress.replace(shengshi, '');
                        }

                        console.log(myBossAddress, shengshiqu);
                        this.$store.commit('changeBossAddress', myBossAddress);

                        break;
                    }
                }
                // 直接取输入框的经纬度来覆盖
                this.$store.commit('changeBossLatLong', { bossLatitude: currentLat, bossLongitude: currentLong });

                // 隐藏当前组件
                this.$parent.isShowStoreMap = false;
                console.log(this.$store.state.bossAddress, this.$store.state.bossLatitude, this.$store.state.bossLongitude);

            },
            /* 图片预览 */
            getImgView(text) {
                if (text && text.indexOf(',') > 0) {
                    text = text.substring(0, text.indexOf(','))
                }
                return getFileAccessHttpUrl(text)
            },
            handleDateChange(value, dateString) {
                this.rangeTime = dateString;
            },
            changeBusinessLicense: function(path){
                this.businessLicense = path;
            },
            changeLicence: function(path){
                this.licence = path;
            },
            async changeArea(opt) {
                let option = {}
                if (opt.provinceCode) {
                    option['provinceCode'] = opt.provinceCode || ''
                }
                if (opt.province) {
                    option['province'] = opt.province || ''
                }
                if (opt.cityCode) {
                    option['cityCode'] = opt.cityCode || ''
                }
                if (opt.city) {
                    option['city'] = opt.city || ''
                }
                if (opt.areaCode) {
                    option['areaCode'] = opt.areaCode || ''
                }
                if (opt.area) {
                    option['area'] = opt.area || ''
                }
                this.model = Object.assign(this.model, option)
                this.areaOption = option
            },

            //生成唯一ID（机构编码）
            getCustomerNumber() {
                const now = new Date()
                const year = now.getFullYear();
                let month = now.getMonth() + 1;
                let day = now.getDate();
                let hour = now.getHours();
                let minutes = now.getMinutes();
                let seconds = now.getSeconds();

                month = month < 10 ? '0' + month : month;
                day = day < 10 ? '0' + day : day;
                hour = hour < 10 ? '0' + hour : hour;
                minutes = minutes < 10 ? '0' + minutes : minutes;
                seconds = seconds < 10 ? '0' + seconds : seconds;

                const yyyyMMddHHmmss = `${year}${month}${day}${hour}${minutes}${seconds}`;
                const rand = Math.random().toString(10).substr(2, 10);

                return `${yyyyMMddHHmmss}${rand}`;
            },
            add() {
                this.currentAddress = ''
                this.currentLat = ''
                this.currentLong = ''
                this.positionList = []
                this.customerNumber = this.getCustomerNumber(),
                this.edit({
                    operationState: 1, // 营业状态   1暂停营业   0正常营业
                    whetherToUpload: 0, // 是否上传省固废  0不上传  1上传
                    linkBluetooth: 0, // 是否连接蓝牙秤  0不连接  1连接蓝牙秤
                    wasteFormType : 0, //废物填报类型  0二维码扎带  1打码  2全部
                    customerNumber : this.customerNumber,
                    address : this.currentAddress,
                    longitude : this.currentLong,
                    latitude : this.currentLat,
                })
            },
            edit(record) {
                this.showMap = false
                this.form.resetFields()
                let opt = record
                console.log('record',record);

                let option = {}
                if (opt.provinceCode) {
                    option['provinceCode'] = opt.provinceCode || ''
                }
                if (opt.province) {
                    option['province'] = (opt.province || '').trim()
                }
                if (opt.cityCode) {
                    option['cityCode'] = opt.cityCode || ''
                }
                if (opt.city) {
                    option['city'] = (opt.city || '').trim()
                }
                if (opt.areaCode) {
                    option['areaCode'] = opt.areaCode || ''
                }
                if (opt.area) {
                    option['area'] = (opt.area || '').trim()
                }
                if (opt.customerNumber) {
                    this.customerNumber = (opt.customerNumber || '')
                }
                if (opt.address) {
                    this.currentAddress = (opt.address || '')
                }
                if (opt.longitude) {
                    this.currentLong = (opt.longitude || '')
                }
                if (opt.latitude) {
                    this.currentLat = (opt.latitude || '')
                }

                if (opt.businessLicenseNumber) {
                    option['businessLicenseNumber'] = (opt.businessLicenseNumber || '').trim()
                }
                if (opt.licenceNumber) {
                    option['licenceNumber'] = (opt.licenceNumber || '').trim()
                }
                if (opt.businessLicense) {
                    this.businessLicense = (opt.businessLicense || '').trim()
                }
                if (opt.licence) {
                    this.licence = (opt.licence || '').trim()
                }
                if (opt.licenceStartTime && opt.licenceEndTime) {
                    this.rangeTime = [opt.licenceStartTime,opt.licenceEndTime];
                }

                this.refreshAddress = false
                this.$nextTick(() => {
                    this.refreshAddress = true
                })
                this.areaOption = option
                this.model = Object.assign({}, record, option)

                if(!record.wasteFormType){
                    this.model['wasteFormType'] = 0;
                }

                this.visible = true

                this.$nextTick(() => {
                    this.form.setFieldsValue(pick(this.model, 'leadername', 'leaderphone', 'secondphone', 'customerType',
                        'address', 'customerName', 'organizationLevel', 'operationState', 'whetherToUpload', 'linkBluetooth',
                        'wasteFormType', 'userId', 'businessLicenseNumber', 'licenceNumber','longitude','latitude'))
                })
            },
            //渲染流程表单数据
            showFlowData() {
                if (this.formBpm === true) {
                    let params = { id: this.formData.dataId }
                    getAction(this.url.queryById, params).then((res) => {
                        if (res.success) {
                            this.edit(res.result)
                        }
                    })
                }
            },

            submitForm() {
                const that = this
                // 触发表单验证
                this.form.validateFields((err, values) => {
                    if (!err) {
                        that.confirmLoading = true
                        let httpurl = ''
                        let method = ''
                        if (!this.model.id) {
                            httpurl += this.url.add
                            method = 'post'
                        } else {
                            httpurl += this.url.edit
                            method = 'put'
                        }

                        let levelValue = values['organizationLevel']
                        if (levelValue == 0) {
                            values['organizationSupervise'] = 0 // 简化监管
                        } else if (levelValue == 1) {
                            values['organizationSupervise'] = 1 // 一般监管
                        } else if (levelValue >= 2) {
                            values['organizationSupervise'] = 2 // 重点监管
                        }

                        if (this.rangeTime[0]) {
                            values['licenceStartTime'] = this.rangeTime[0];
                        }
                        if (this.rangeTime[1]) {
                            values['licenceEndTime'] = this.rangeTime[1];
                        }

                        if (that.businessLicense) {
                            values['businessLicense'] = that.businessLicense;
                        }
                        if (that.licence) {
                            values['licence'] = that.licence;
                        }
                        if (that.currentAddress) {
                            values['address'] = that.currentAddress;
                        }
                        if (that.currentLat) {
                            values['latitude'] = that.currentLat;
                        }
                        if (that.currentLong) {
                            values['longitude'] = that.currentLong;
                        }

                        if (values['organizationSupervise'] == undefined) {
                            this.$message.info('请选择机构类型')
                            return
                        }
                        let formData = Object.assign(this.model, values)

                        httpAction(httpurl, formData, method).then((res) => {
                            if (res.success) {
                                that.$message.success(res.message)
                                that.$emit('ok')
                                that.positionList = []
                            } else {
                                that.$message.warning(res.message)
                            }
                        }).finally(() => {
                            that.confirmLoading = false
                        })
                    }

                })
            },


        },
    }
</script>
<style scoped>

#map-box .page-store-map ul {
    margin-top: 10px;
    padding-bottom: 10px;
    flex: 1;
    overflow:auto;/*当内容超过，出现滚动条*/
    overflow-y: auto;
    margin-left: 80px;
    width: 450px;
    height: 300px;
    border: 1px #ffffff solid;
}

#map-box .page-store-map ul li {
    margin-bottom: 10px;
    padding-left: 30px;
    padding-right: 10px;
    position: relative;
    list-style-type: none;
}

#map-box .page-store-map ul li h3 {
    line-height: 20px;
    color: #333;
    font-size: 14px;
}

#map-box .page-store-map ul li p {
    line-height: 15px;
    color: #999;
    font-size: 12px;
}

#map-box .page-store-map ul li:last-child {
    margin-bottom: 0;
}

#map-box .page-store-map ul li:after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border: 1px solid #ccc;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    left: 10px;
}

#map-box .page-store-map ul li.active:after {
    top: 10px;
    border-radius: 0;
    width: 13px;
    height: 15px;
    border: 0 none;
    background: url() no-repeat;
    background-size: contain;
}

#map-box .page-store-map .submit-box {
    height: 60px;
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    align-items: center;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
}

#map-box .page-store-map .submit-box div {
    margin: 10px;
    box-sizing: border-box;
    font-size: 15px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 15px;
}

#map-box .page-store-map .submit-box .fanhui {
    flex: 1;
    border: 1px solid #DEDEDE;
    color: #333;
}

#map-box .page-store-map .submit-box .queding {
    flex: 2;
    background-color: #2DC927;
    color: #fff;
    font-weight: bold;
}

.icon-map {
    display: inline-block;
    vertical-align: middle;
    width: 15px;
    height: 21px;
    background: url() no-repeat;
    background-size: contain;
}
</style>
